<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>志愿者-信息收集</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.min.js"></script>

</head>
<body>
    <form id="volunteerForm" role="form" class="form-horizontal" style="margin-top:20px;" method="post" action="${pageContext.request.contextPath}/volunteer/addVolunteer">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">名称:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="name" name="name" placeholder="请输入名称" />
            </div>
        </div>
        <div class="form-group">
            <label for="sex" class="col-sm-2 control-label">姓别</label>
            <div class="col-sm-8">
                <label class="radio-inline">
                    <input type="radio" id="sex" name="sex" id="optionsRadios3" value="男" checked> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" id="sex" name="sex" id="optionsRadios4"  value="女"> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="identityCard" class="col-sm-2 control-label">身份证号</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="identityCard" name="identityCard" placeholder="请输入身份证号" />
            </div>
        </div>
        <div class="form-group">
            <label for="company" class="col-sm-2 control-label">工作单位/就读学校</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="company" name="company" placeholder="请输入工作单位" />
            </div>
        </div>
        <div class="form-group">
            <label for="mobile" class="col-sm-2 control-label">联系电话</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="mobile" name="mobile" placeholder="请输入联系电话" />
            </div>
        </div>
        <div class="form-group">
            <label for="wechat" class="col-sm-2 control-label">微信</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="wechat" name="wechat" placeholder="请输入微信" />
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">电子邮箱</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="email" name="email" placeholder="请输入电子邮箱" />
            </div>
        </div>
        <div class="form-group">
            <label for="workExperience" class="col-sm-2 control-label">工作经历</label>
            <div class="col-sm-8">
                <textarea name="workExperience" id="workExperience" name="workExperience" class="form-control" cols="30" rows="10"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="speciality" class="col-sm-2 control-label">特长方向</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="speciality" name="speciality" placeholder="请输入特长方向" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-8">
                <center>
                    <button id="volunteer" type="submit" class="btn btn-primary">提交</button>
                </center>
            </div>
        </div>
    </form>

    <script type="text/javascript">
        $('#volunteerForm').bootstrapValidator({
            message : '此值无效!',
            feedbackIcons : {
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },

            fields : {
                name : {
                    validators : {
                        notEmpty : {
                            message : '姓名值不能为空！'
                        },
                        stringLength: {
                            min: 2,
                            message: '用户名长度必须大于2！'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z\u4e00-\u9fa5]+$/,
                            message: '用户名不能有数字和字符！'
                        }


                    },
                },
                identityCard : {
                    validators : {
                        notEmpty : {
                            message : '身份证号码不能为空！'
                        },
                        regexp: {
                            regexp: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                            message: '身份证号码格式不正确，为15位和18位身份证号码！'
                        },
                        callback: {/*自定义，可以在这里与其他输入项联动校验*/
                            message: '身份证号码无效！',
                            callback:function(value, validator,$field){
                                //15位和18位身份证号码的正则表达式
                                var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
                                //如果通过该验证，说明身份证格式正确，但准确性还需计算
                                var idCard = value;
                                if (regIdCard.test(idCard)) {
                                    if (idCard.length == 18) {
                                        var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //将前17位加权因子保存在数组里
                                        var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
                                        var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
                                        for (var i = 0; i < 17; i++) {
                                            idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
                                        }
                                        var idCardMod = idCardWiSum % 11;//计算出校验码所在数组的位置
                                        var idCardLast = idCard.substring(17);//得到最后一位身份证号码
                                        //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
                                        if (idCardMod == 2) {
                                            if (idCardLast == "X" || idCardLast == "x") {
                                                return true;
                                                //alert("恭喜通过验证啦！");
                                            } else {
                                                return false;
                                                //alert("身份证号码错误！");
                                            }
                                        } else {
                                            //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
                                            if (idCardLast == idCardY[idCardMod]) {
                                                //alert("恭喜通过验证啦！");
                                                return true;
                                            } else {
                                                return false;
                                                //alert("身份证号码错误！");
                                            }
                                        }
                                    }
                                } else {
                                    //alert("身份证格式不正确!");
                                    return false;
                                }
                            }
                        }
                    }
                },
                age : {
                    validators : {
                        notEmpty : {
                            message : '年龄不能为空！'
                        },
                        stringLength: {
                            min: 1,
                            max: 3,
                            message: '年龄太大了！'
                        },
                        regexp: {
                            regexp: /^[0-9]+$/,
                            message: '年龄只能为数字！'
                        }
                    }
                },
                mobile : {
                    validators : {
                        notEmpty : {
                            message : '手机号码不能为空！'
                        },
                        regexp: {
                            regexp: /^1[34578]\d{9}$/,
                            message: '请输入完整手机号码！'
                        }
                    }
                },
                email : {
                    validators : {
                        notEmpty : {
                            message : '邮箱不能为空！'
                        },
                        regexp: {
                            regexp: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/,
                            message: '请输入完整邮箱！'
                        }
                    }
                },
            }
        });
        var bootstrapValidator = $('#volunteerForm').data('bootstrapValidator');
        $("#volunteerForm").submit(function(ev){ev.preventDefault();});
        //确认
        $('#volunteer').click(function() {
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid()) {
                var postData = $("#volunteerForm").serialize();
                $.ajax({
                    url: "${pageContext.request.contextPath}/volunteer/addVolunteer",
                    //同步方式
                    async: false,
                    data: postData,
                    type: "POST",
                    //指定请求成功后执行的回调函数
                    success: function(){
                        var path = '${pageContext.request.contextPath}/success';
                        window.location.href = path;
                    },
                    error: function(){
                        alert("error");
                    }
                });
            } else return;
        });
    </script>
</body>
</html>